<template>
  <!--  -->
  <a-modal
    title="产品列表"
    width="80%"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    :footer="null"
  >
    <a-spin :spinning="false">
      <a-form :form="form" layout="inline" labelAlign="right">
        <s-table
          ref="table"
          style="margin-top: 15px;"
          size="default"
          :columns="columns"
          :data="loadData"
          :alert="true"
          :scroll="{ x: 'calc(700px + 50%)' }"
        >
          <!-- <span slot="file" slot-scope="text">
            <ImagePreview :images="text"/>
          </span> -->
        </s-table>
      </a-form>
    </a-spin>
    <!--  新增编辑详情弹框  -->
    <childNumAddAndEdit
      ref="childNumAddAndEdit"
      @ok="$refs.table.refresh(true)"
      :pid="record.id"
      :materialType="materialType"
    />
  </a-modal>
</template>

<script>
import {page} from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage'
import {STable} from '@/components'

export default {
  components: {STable},
  data() {
    return {
      record: {},
      queryParam: {},
      columns: [
        {
          title: '序号',
          width: '80px',
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '产品名称',
          width: '200px',
          dataIndex: 'materialName'
        },
        {
          title: '生产数量',
          width: '120px',
          dataIndex: 'number'
        },
        {
          title: '已生产数量',
          width: '120px',
          dataIndex: 'completedNumber'
        },
        {
          title: '未生产数量',
          width: '120px',
          dataIndex: '',
          customRender: (text, record, index) => `${record.number - record.completedNumber}`
        },
        {
          title: '已入库数量',
          width: '120px',
          dataIndex: 'inStoreNumber'
        },
        {
          title: '待入库数量',
          width: '120px',
          customRender: (text, record, index) => `${record.completedNumber - record.inStoreNumber}`
        },
        {
          title: '已发货数量',
          width: '120px',
          dataIndex: 'deliveredNumber'
        },
        {
          title: '待发货数量',
          width: '120px',
          dataIndex: '',
          customRender: (text, record, index) => `${record.number - record.deliveredNumber}`
        },
				{
          title: '已入库箱数',
          width: '120px',
          dataIndex: '',
          customRender: (text, record, index) => `${record.inStoreBoxNumber}`
        },
				{
          title: '已发货箱数',
          width: '120px',
          dataIndex: '',
          customRender: (text, record, index) => `${record.deliveredBoxNumber}`
        },
				{
          title: '待发货箱数',
          width: '120px',
          dataIndex: '',
          customRender: (text, record, index) => `${record.inStoreBoxNumber - record.deliveredBoxNumber}`
        },
        {
          title: '备注',
          width: '120px',
          dataIndex: 'material.remark'
        },
        {
          title: '库位备注',
          width: '120px',
          dataIndex: 'material.storehousePositionRemark',
        },
      
      ],
      materialType: this.$businessEnum.MATERIAL_TYPE_ENUM.product.id,
      
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        console.log('record', this.record)
        let query = {
          ...this.queryParam,
          ...parameter,
          materialId: this.record.materialId,
          materialType: this.materialType
        }
        return page(query).then((res) => {
          console.log('res', res)
          return res.data
        })
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
    }
  },
  methods: {
    // 初始化方法
    init(record) {
      this.record = {...record}
      this.visible = true
      this.queryParam.orderId = record.orderId
      this.$refs.table.refresh(true)
    },
    handleOk() {
      this.$refs.table.refresh()
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    }
  }
}
</script>
